<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-1.11.0.min.js"></script>
        <script src="js/echarts.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>
    <body>
	<form class="form-horizontal">
	<div class="control-group">
    <label class="control-label" for="thread">线程数</label>
		<div class="controls">
		  <input type="text" id="thread" placeholder="线程数">
		</div>
	</div>
	<div class="control-group">
    <label class="control-label" for="request">请求数</label>
		<div class="controls">
		  <input type="text" id="request" placeholder="请求数">
		</div>
	</div>
	<div class="control-group">
    <label class="control-label" for="url">URL</label>
		<div class="controls">
		  <input type="text" id="url" placeholder="URL" value="http://www.baidu.com">
		</div>
	</div>
	<div class="control-group">
    <label class="control-label" for="para">param</label>
		<div class="controls">
		  <input type="text" id="para" placeholder="param" >
		</div>
	</div>
	<div class="control-group">
	<label class="control-label" ></label>
		<div class="controls">
		  <a class="btn btn-success" onclick="submit()">Go</a>
		</div>
		
	</div>
	
	</form>
	
	
        <div id="fir" style="width: 900px;height:400px;"></div>
		<div id="none" style="width: 900px;height:400px;"></div>
 
    </body>
 
    <script type="text/javascript">
        function bb() {
			var fir = echarts.init(document.getElementById('fir'));
			fir.clear();
			fir.showLoading({
				text : '正在加载数据'
			});
			var thread = $("#thread").val();
			var request = $("#request").val();
			var url = $("#url").val();
            var param = $("#para").val();
			var getUrl = 'http://localhost:8080/test/thread/' + thread + '/request/' + request + '?url=' + url;
            $.post(getUrl,param).done(function(data) {
				if(data != null){
				fir.hideLoading();
				fir.setOption({
                    title: {
                        text: '单次调用耗时',
						subtext: '总耗时：' + data.zhexian.counttime + 'ms \n成功率' + data.zhexian.successrate
                    },
                    xAxis: {
                        data: data.zhexian.categories
                    },
                    yAxis: {
						type : 'value',
						axisLabel : {
							formatter: '{value} ms'
						}
					},
                    series: [{
                        name: '耗时',
                        type: 'line',
                        data: data.zhexian.data,
						markPoint : {
							data : [
								{type : 'max', name: '最慢'},
								{type : 'min', name: '最快'}
							]
						},
						markLine : {
							data : [
								{type : 'average', name: '平均值'}
							]
						}
                    }]
					
 
                });
				}else{
				alert("...");
				}
			    
                
            });
 
        }
		
		function submit(){
			bb();
		}
		 
    </script>
 
</html>